<template>
	<div class="side-menu-wrapper">
		<slot></slot>

		<Menu ref="menu" v-show="!collapsed" :active-name="activeTrueName" :opened-names="openedNames" :accordion="accordion" :theme="theme" width="auto" @on-select="handleSelect">
			<template v-for="item in menuList">
				<template v-if="item.children && item.children.length >= 1">
					<side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>

					<menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`">
						<Icon :custom="item.children[0].icon || ''" /><span>{{ showTitle(item.children[0]) }}</span>
					</menu-item>
				</template>

				<template v-else>
					<side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>

					<menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`">
						<Icon :custom="item.icon || ''" /><span>{{ showTitle(item) }}</span>
					</menu-item>
				</template>
			</template>
		</Menu>

		<div class="menu-collapsed" v-show="collapsed" :list="menuList">
			<template v-for="item in menuList">
				<collapsed-menu v-if="item.children && item.children.length > 1" @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>

				<Tooltip transfer v-else :content="showTitle(item.children && item.children[0] ? item.children[0] : item)" placement="right" :key="`drop-menu-${item.name}`">
					<a @click="handleSelect(getNameOrHref(item, item.children.length >= 1))" class="drop-menu-a" :style="{ textAlign: 'center' }">
						<Icon :size="rootIconSize" :color="textColor" :custom="item.icon || (item.children && item.children[0].icon)" />
					</a>
				</Tooltip>
			</template>
		</div>
	</div>
</template>

<script>
import SideMenuItem from './side-menu-item.vue'
import CollapsedMenu from './collapsed-menu.vue'
import { getUnion } from '@/libs/tools'
import mixin from './mixin'
export default {
	name: 'SideMenu',
	mixins: [mixin],
	components: {
		SideMenuItem,
		CollapsedMenu
	},
	props: {
		menuList: {
			type: Array,
			default() {
				return []
			}
		},
		collapsed: {
			type: Boolean
		},
		theme: {
			type: String,

			default: 'dark'
		},
		rootIconSize: {
			type: Number,

			default: 20
		},
		iconSize: {
			type: Number,

			default: 16
		},
		accordion: Boolean,
		activeName: {
			type: String,
			default: ''
		},
		openNames: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			openedNames: []
		}
	},
	methods: {
		handleSelect(name) {
			console.log(name)
			this.$emit('on-select', name)
		},
		getOpenedNamesByActiveName(name) {
			return this.$route.matched.map((item) => item.name).filter((item) => item !== name)
		},
		updateOpenName(name) {
			if (name === this.$config.homeName) this.openedNames = []
			else this.openedNames = this.getOpenedNamesByActiveName(name)
		}
	},
	computed: {
		textColor() {
			return this.theme === 'dark' ? '#fff' : '#495060'
		},
		activeTrueName() {
			// console.log(this.$route)
			// 递归找上一层路由，不隐藏的路由
			let name = this.$route.name
			if (this.$route.name !== this.$config.homeName) {
				for (let i = this.$route.matched.length - 1; i >= 0; i--) {
					if (this.$route.matched[i].meta && !this.$route.matched[i].meta.hideInMenu) {
						name = this.$route.matched[i].name
					}
				}
			}
			return name
		}
	},
	watch: {
		activeName(name) {
			if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName(name)
			else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
		},
		openNames(newNames) {
			this.openedNames = newNames
		},
		openedNames() {
			this.$nextTick(() => {
				this.$refs.menu.updateOpened()
			})
		}
	},
	mounted() {
		this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
	}
}
</script>

<style lang="less">
@import './side-menu.less';
</style>
